//分离css
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const website = {
    publicPath: "/"
}

const getHtmlConfig = function(name){
    return {

        title: 'Output Management',

        //是对html文件进行压缩
        minify: false,

        //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
        hash: true,

        // inject:true,

        // loader: "raw-loader",

        //是要打包的html模版路径和文件名称。
        template: 'html-withimg-loader!' + path.resolve(__dirname, './src/pages') + `/${name}.html`,

        filename: path.resolve(__dirname, './dist/pages') + `/${name}.html`,

        //分别打包，index引入index.js
        // chunks:[name],
    }
}

module.exports = {

    mode: "development",

    entry: {
        index: './src/js/index.js',
        detail: './src/js/detail.js'
    },
    output: {
        path: path.join(__dirname, 'dist'), // 出口目录，dist文件
        filename: 'js/[name].js?t=[hash]', //这里name就是打包出来的文件名，因为是单入口，就是main，多入口下回分解
        publicPath: website.publicPath
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',
                    //如果需要，可以在 sass-loader 之前将 resolve-url-loader 链接进来
                    use: ['css-loader', 'postcss-loader']
                }),
                include: path.join(__dirname, 'src'), //限制范围，提高打包速度
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)/,
                use: {
                    loader: 'url-loader',
                    options: {
                        outputPath: 'img/', // 图片输出的路径
                        limit: 5 * 1024
                    }
                }
            },

            //less处理及打包
            {
                test: /\.less$/,
                use: ExtractTextWebpackPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    },{
                        loader: "postcss-loader"
                    }, {
                        loader: "less-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            }
        ]

    },
    plugins: [
        // new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
        new HtmlWebpackPlugin(getHtmlConfig("index")),
        new HtmlWebpackPlugin(getHtmlConfig("detail")),
        new HtmlWebpackPlugin(getHtmlConfig("edit")),
        new HtmlWebpackPlugin(getHtmlConfig("login")),
        new HtmlWebpackPlugin(getHtmlConfig("reg")),
        // new webpack.DefinePlugin({
        //     NODE_ENV:JSON.stringify(process.env.NODE_ENV)
        // }),
        new ExtractTextWebpackPlugin({
            filename: 'css/[name].css?t=[hash]',
            // allChunks:true
        }),
        new CopyWebpackPlugin([
            {
              from: path.resolve(__dirname, 'dist'),
              to: path.resolve(__dirname, '../public'),
              ignore: ['.*'],
              copyUnmodified: true
            }
          ])
    ],
    devServer: {
        contentBase: path.join(__dirname, "dist"), //静态文件根目录
        port: 9090, // 端口
        host: 'localhost',
        overlay: true,
        compress: true // 服务器返回浏览器的时候是否启动gzip压缩
    }
}